<section class="section-padding {{ if eq .variant "alternate" }}bg-gray-50{{ else if eq .variant "highlight" }}bg-blue-50{{ else }}bg-white{{ end }} {{ with .class }}{{ . }}{{ end }}">
  <div class="container mx-auto px-4">
    <div class="grid md:grid-cols-2 gap-12 items-center">
      <div class="max-w-xl">
        {{ with .audience }}
          <div class="text-sm font-medium mb-4">{{ . }}</div>
        {{ end }}
        <h2 class="text-3xl md:text-4xl font-bold mb-6">{{ .title }}</h2>
        <p class="text-lg text-gray-600 mb-8">{{ .description }}</p>
        {{ if and .buttonText .buttonUrl }}
          <a href="{{ .buttonUrl }}" class="btn btn-primary">
            {{ .buttonText }}
          </a>
        {{ end }}
      </div>
      {{ if .imageSrc }}
        <div class="relative">
          <img src="{{ .imageSrc }}"
               alt="{{ .imageAlt }}"
               class="rounded-lg shadow-lg object-cover w-full">
        </div>
      {{ end }}
    </div>
  </div>
</section>